<template>
    <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="769px">
        <el-row :gutter="8" style="width: 100%">
            <el-col :span="12" :xs="24">                
                <div class="person-selector-result" style="flex: 1;">
                    <el-row>
                        <el-col :span="12" :xs="24">
                            <el-input v-model="state.queryParams.roleName" size="default" :placeholder="$t('message.sysUser.roleName')" > </el-input>
                        </el-col>                        
                        <el-col :span="12" :xs="24" class="mb20 search-actions" align="center" >
                            <el-button size="default" type="primary" class="ml10" @click="queryRole">
					<el-icon>
						<ele-Search />
					</el-icon>
					{{ $t('message.userOperation.query') }}
				</el-button>
				<el-button size="default" class="ml10" @click="reset">
					<el-icon>
						<ele-Refresh />
					</el-icon>
					{{$t('message.userOperation.reset') }}
				</el-button>  
                        </el-col>
                    </el-row>
                    <el-table :data="state.roleList" style="width: 100%" v-loading="state.loading" border>
                        <el-table-column prop="roleName" :label="$t('message.sysUser.roleName')" show-overflow-tooltip />
                        <el-table-column prop="code" :label="$t('message.sysUser.roleCode')" show-overflow-tooltip />
                        <el-table-column :label="$t('message.userOperation.oper')" align="center" fixed="right"
                            show-overflow-tooltip>
                            <template #default="scope">
                                <el-button icon="ele-Plus" size="small" text type="primary" @click="choiceRole(scope.row)">
                                    {{ $t('message.userOperation.choice') }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="12" :xs="24">
                <div class="person-selector-selected" style="flex: 1;">
                    <div>
                        <span style="font-size: 15px;">{{ $t('message.userAlter.selected') }}</span>
                        <el-button icon="ele-Delete" size="default" text type="primary" @click="removeAll()">
                            {{ $t('message.userOperation.clear') }}
                        </el-button>
                    </div>
                    
                    <el-scrollbar style="max-height: 200px;">
                        <el-table :data="state.selectedRole" style="width: 100%" v-loading="state.loading" border >
                            <el-table-column prop="roleName" :label="$t('message.sysUser.roleName')" show-overflow-tooltip />
                            <el-table-column prop="code" :label="$t('message.sysUser.roleCode')" show-overflow-tooltip />
                            <el-table-column :label="$t('message.userOperation.oper')" align="center" 
                            show-overflow-tooltip>
                            <template #default="scope">
                                <el-button icon="ele-Delete" size="small" text type="primary" @click="removeRole(scope.row)">
                                    {{ $t('message.userOperation.delete') }}
                                </el-button>
                            </template>
                        </el-table-column>
                        </el-table>                        
                    </el-scrollbar>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog" size="default">{{$t('message.userOperation.cancel')}}</el-button>
                <el-button type="primary" @click="submit" size="default">{{$t('message.userOperation.submit')}}</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { feature } from "/@/utils/axios-utils";
import { UserRoleInput,RoleSelectorOutput } from '/@/api-services/models/system';
import { ElMessage } from 'element-plus';
import userApi from '/@/api-services/apis/system/userApi';
import roleApi from '/@/api-services/apis/system/roleApi';
const state=reactive({
    loading: false,
	isShowDialog: false,
    ruleForm:{} as UserRoleInput,
    selectedRole:[] as Array<RoleSelectorOutput>,
    roleList:[] as Array<RoleSelectorOutput>,
    userId:0,
    queryParams: {
        roleName:''        
    },
    tableParams: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0 as any,
        totalCount: 0 as any
    },
})

const openDialog=async (user:any)=>{
    state.isShowDialog=true;
    state.userId=user.id;
    let ownRoleRes=await userApi.roleList({id:user.id});    
    state.selectedRole=ownRoleRes.data.data??[];
    queryRole();
}
const queryRole=async ()=>{
    let rolePageRes=await roleApi.roleSelector({'roleName':state.queryParams.roleName,'pageIndex':state.tableParams.pageIndex,'pageSize':state.tableParams.pageSize});
    state.roleList=rolePageRes.data.data??[]
}
const reset=()=>{
    state.queryParams.roleName=''
}

const choiceRole = (row: any) => {
    let index= state.selectedRole.findIndex((item:any)=>item.id==row.id)
    if(index<0)//没有才添加
        state.selectedRole.push(row);
}

const removeRole= (row: any) => {   
    const index = state.selectedRole?.findIndex((it: any) => it.id === row.id);
    if (index > -1) {
        state.selectedRole.splice(index, 1);
    }
}
// 取消
const closeDialog = () => {
	state.isShowDialog = false;
};

// 提交
const submit =async () => {
	var roleIdList=state.selectedRole.map((it:any)=>it.id);
    state.ruleForm={id:state.userId,roleIdList:roleIdList}
    const [err] = await feature(userApi.grantRole(state.ruleForm))
    if(err){
        ElMessage.error(err.message)
    }
    else{
        closeDialog();
    }		
};
const removeAll=()=>{
    state.selectedRole=[];
}
// 导出对象
defineExpose({ openDialog });
</script>